<template>
    <div class="question_bank">
        <div class="search">
            <div class="left">
                <!-- 项目名称 -->
                <div class="search_list">
                    <span class="search_text">项目名称：</span>
                    <el-select v-model="project_name" clearable placeholder="请选择">
                        <el-option
                            v-for="item in project_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="center">
                <!-- 内容 -->
                <div class="search_list">
                    <span class="search_text">内容：</span>
                    <el-input v-model="content" placeholder="输入"></el-input>
                </div>
            </div>
            <div class="right"></div>
        </div>
        <!--列表-->
        <div class="list question_list blockMould">
            <div class="list_head_button">
                <div class="search_button">
                    <el-button size="mini" type="warning" plain @click="dialogVisibleAdd = true">新增</el-button>
                </div>
                <div class="search_name">
                    <el-button size="mini" type="primary" @click="search_list">查询</el-button>
                    <el-button size="mini" @click="reset_list">重置</el-button>
                </div>
            </div>
            <el-table
                :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
                :row-class-name="tableRowClassName"
                :data="questionList">
                <el-table-column
                    prop="id"
                    label="题目ID"
                    min-width="20">
                </el-table-column>
                <el-table-column
                    prop="productName"
                    label="项目"
                    min-width="23">
                </el-table-column>
                <el-table-column
                    prop="question"
                    label="题目"
                    min-width="40">
                </el-table-column>
                <el-table-column
                    prop="answer"
                    label="解答"
                    min-width="45">
                    <template slot-scope="scope">
                        <el-popover
                            v-if="scope.row.answer.length > 20"
                            placement="top"
                            trigger="hover"
                            popper-class="answer">
                            <span>{{scope.row.answer}}</span>
                            <span slot="reference" style="curosr:pointer">{{scope.row.answer.slice(0,20)+"..."}}</span>
                        </el-popover>
                        <div v-else>{{scope.row.answer}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="15">
                    <template slot-scope="scope">
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="编辑" placement="bottom">
                            <el-button type="text" @click="edit_question_info(scope.row)">
                                <img src="../../assets/common/edit.svg" alt="">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="删除" placement="bottom">
                            <el-button type="text" @click="delete_question(scope.row)">
                                <img src="../../assets/common/delete.svg" alt="">
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
        </div>
        <!--添加问题-->
        <el-dialog
        title="新增"
        :visible.sync="dialogVisibleAdd"
        width="526px"
        class="label_dialog"
        :before-close="closeAddDialog">
            <div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">所属项目：</span>
                    <el-select v-model="add_project" placeholder="请选择">
                        <el-option
                            v-for="item in project_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">题目：</span>
                    <el-input class="question_input" v-model="add_question" placeholder="请输入问题"></el-input>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo" style="transform: translateY(-29px);">*</span>
                    <span class="search_text" style="transform: translateY(-32px);">解答：</span>
                    <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="add_answer"
                        maxlength="1000"
                        show-word-limit>
                    </el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelAddDialog">取消</el-button>
                <el-button type="primary" @click="add_questions">确定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑问题 -->
        <el-dialog
        title="编辑"
        :visible.sync="dialogVisibleEdit"
        width="526px"
        class="label_dialog"
        :before-close="closeEditDialog">
            <div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">所属项目：</span>
                    <el-select v-model="edit_project" placeholder="请选择">
                        <el-option
                            v-for="item in project_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">题目：</span>
                    <el-input class="question_input" v-model="edit_question" placeholder="请输入问题"></el-input>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo" style="transform: translateY(-29px);">*</span>
                    <span class="search_text" style="transform: translateY(-32px);">解答：</span>
                    <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="edit_answer"
                        maxlength="1000"
                        show-word-limit>
                    </el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEditDialog">取消</el-button>
                <el-button type="primary" @click="edit_questions">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { api, baseAjax } from '@/api/api';
    import pagination from '../public/pagination';
    import {statusCode} from '../../utils/index';
    export default {
        name: "questionBankManagement",
        data() {
            return {
                //分页
                page: {
                    currentPage: 1,    //当前页
                    pageSize: 10,    //每页显示条数
                    totalPage: 0,   //总页数
                    total:null    //总条数
                },
                dialogVisibleAdd:false,   //是否显示添加问题弹框
                dialogVisibleEdit:false,   //是否显示编辑问题弹框
                project_name:'',   //项目名称筛选
                project_list:[],   //项目下拉框值
                content:'',   //内容筛选项
                questionList:[],   //列表数据
                add_project:'',  //添加问题所属项目
                add_question:'',   //添加问题题目
                add_answer:'',   //添加问题答案
                edit_project:'',   //编辑问题所属项目
                edit_question:'',  //编辑问题题目
                edit_answer:'',   //编辑问题解答答案
                edit_question_id:null  //编辑id
            }
        },
        components:{
            pagination
        },
        mounted(){
            this.getAllProduct();//获取所有产品
            this.getQuestionList();//列表数据
        },
        methods: {
            //修改列表tr颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                return 'success_row';
                }
                return '';
            },
            //改变当前页码
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.getQuestionList();
            },
            //改变每页条数
            handlePageSize(pageSize){
                this.page.pageSize = pageSize;
                this.getQuestionList();
            },
            //关闭添加问题弹框
            closeAddDialog(done){
                this.add_project = '';
                this.add_question = '';
                this.add_answer = '';
                done();
            },
            //取消添加弹框
            cancelAddDialog(){
                this.dialogVisibleAdd = false;
                this.add_project = '';
                this.add_question = '';
                this.add_answer = '';
            },
            //添加问题
            add_questions(){
                let that = this;
                if(!this.add_project){
                    this.$alert('请选择"所属项目"');
                }else if(!this.add_question){
                    this.$alert('请填写"题目"');
                }else if(this.add_question.length > 60){
                    this.$alert('题目长度不能大于60个字');
                }else if(!this.add_answer){
                    this.$alert('请填写"解答"');
                }else{
                    let data = {
                        productId:this.add_project,
                        question:this.add_question,
                        answer:this.add_answer
                    };
                    baseAjax(api.add_question, data , (res)=>{
                        if(res.code == statusCode.success){
                            if(res.data == true){
                                that.$message.success('添加成功');
                                that.dialogVisibleAdd = false;
                                that.add_project = '';
                                that.add_question = '';
                                that.add_answer = '';
                                that.getQuestionList();
                            }else{
                                that.$mesaage.error('添加失败');
                            }
                        }
                    });
                    
                }
            },
            //关闭编辑弹框
            closeEditDialog(done){
                this.edit_project = '';
                this.edit_question = '';
                this.edit_answer = '';
                this.edit_question_id = null;
                done();
            },
            //取消编辑弹框
            cancelEditDialog(){
                this.dialogVisibleEdit = false;
                this.edit_project = '';
                this.edit_question = '';
                this.edit_answer = '';
                this.edit_question_id = null;
            },
            //编辑问题信息
            edit_question_info(info){
                let product_id = null;
                this.project_list.forEach(item=>{
                    if(info.productName === item.name){
                        product_id = item.id;
                    }
                });
                this.dialogVisibleEdit = true;
                this.edit_project = product_id;
                this.edit_question = info.question;
                this.edit_answer = info.answer;
                this.edit_question_id = info.id;
            },
            //编辑问题
            edit_questions(){
                let that = this;
                if(!this.edit_project){
                    this.$alert('请选择"所属项目"');
                }else if(!this.edit_question){
                    this.$alert('请填写"题目"');
                }else if(this.edit_question.length > 60){
                    this.$alert('题目长度不能大于60个字');
                }else if(!this.edit_answer){
                    this.$alert('请填写"解答"');
                }else{
                    let data = {
                        id:this.edit_question_id,
                        productId:this.edit_project,
                        question:this.edit_question,
                        answer:this.edit_answer
                    };
                    baseAjax(api.edit_question, data, (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){
                                that.$message.success('编辑成功');
                                that.dialogVisibleEdit = false;
                                that.edit_project = '';
                                that.edit_question = '';
                                that.edit_answer = '';
                                that.edit_question_id = null;
                                that.getQuestionList();
                            }else{
                                that.$message.error('编辑失败');
                            }
                        }
                    });
                    
                }
            },
            //删除问题
            delete_question(info){
                let that = this;
                this.$confirm('删除后不可恢复，是否确认删除?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.delete_question = {
                        url:api.delete_question_url+'?id='+info.id,
                        method:api.delete_question.method
                    };
                    baseAjax(api.delete_question, '', (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){
                                that.$message.success('删除成功');
                                that.getQuestionList();
                            }else{
                                that.$message.error('删除失败');
                            }
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //获取所有产品
            getAllProduct(){
                let that = this;
                baseAjax(api.get_all_product, '', (res)=>{
                    if(res.code === statusCode.success){
                        that.project_list = res.data;
                    }
                });
            },
            //列表数据
            getQuestionList(){
                let that = this;
                let data = {
                    currentPage:this.page.currentPage,
                    pageSize:this.page.pageSize,
                    productId:this.project_name,
                    question:this.content,
                    totalPage:this.page.totalPage
                };
                baseAjax(api.get_question_list, data, (res)=>{
                    if(res.code === statusCode.success){
                        let {pageSize, totalPage, value, count} = res.data;
                        that.page.pageSize = pageSize;
                        that.page.totalPage = totalPage;
                        that.page.total = count;
                        that.questionList = value;
                    }
                });
            },
            //查询
            search_list(){
                this.handleCurrentChange(1);
            },
            //重置
            reset_list(){
                this.project_name = '';
                this.content = '';
            }
        }
    }
</script>

<style lang="less">
.question_bank{
    font-family: PingFangSC-Regular, PingFang SC;
    .search{
        .left,.center{
            margin-right:24px;
        }
        .center{
            .search_list{
                .search_text{
                    min-width:42px;
                }
            }
        }
    }
    .question_list{
        /deep/.el-table{
            tbody{
                tr{
                    td:first-child{
                        padding-left:39px;
                    }
                }
            }
        }
    }

    .el-dialog {
        .el-textarea{
            width: 310px;
            .el-textarea__inner{
                width:100%;
                height: 100px;
                border-radius: 2px;
                border: 1px solid #DDDFE6;
                resize:none;
            }
        }
    }
}

.answer{
    width:780px;
}
</style>
